<template>
  <el-card class="box-card" :style="{ height: screenHeight - cardHeight + 'px' ,minHeight: '500px' }">
    <div class="body_content">
      <!-- :style="{ height: screenHeight - cardHeight + 'px' ,MinHeight: '500px' }" -->
      <el-row>
        <el-col :span="6" class="aside" :style="{ height: screenHeight - cardHeight - 35 + 'px' ,minHeight: '500px' }">
          <!-- :style="{ MaxHeight: screenHeight - cardHeight + 'px' }" -->
          <!--v-loading="loading"-->
          <el-input v-model="filterText" placeholder="请输入内容">
            <el-button slot="append" icon="el-icon-search" />
          </el-input>
          <!-- <template v-if="list.length != 0">
            <ul class="list" :style="{ height: screenHeight - 10 + 'px' }">
              <li v-for="(item, index) in list" :key="index" :class="activeIndex == item.id ? 'active' : ''" @click="setIndex(item)">{{ item.shiTiLMC }}</li>
            </ul>
          </template>
          <template v-elses>
            <div class="Null" :style="{ height: screenHeight - 10 + 'px' }"><span>暂无数据</span></div>
          </template>-->
          <el-table
            ref="singleTable"
            :data="records"
            border
            :max-height="screenHeight - cardHeight -100"
            mmin-height="500"
            highlight-current-row
            :header-row-style="{ display: 'none' }"
            @row-click="handleSelectRecord"
          >
            <!-- @current-change="setIndex" -->
            <el-table-column prop="shiTiLMC">
              <template slot-scope="scope">
                <div class="record-item">
                  {{ scope.row.shiTiLMC }}
                  <span style="font-size: 10px">{{ scope.row.getFrontId() }}</span>

                  <el-button
                    style="float: right; padding: 3px 0"
                    type="text"
                    @click.stop="delShiTiL(scope.$index,scope.row)"
                  >删除
                  </el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-col>

        <el-col :span="17" :offset="1" class="content">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <el-button style="float: right; padding: 3px 0;" type="text" @click="submitRecord">提交记录</el-button>
              <el-button style="float: right; padding: 3px 0; margin-right: 10px" type="text" @click="openAdd">新建实体类
              </el-button>
              <el-button style="float: right; padding: 3px 0; margin-right: 10px" type="text" @click="recallShiTiL">回收站
              </el-button>
            </div>

            <keep-alive>
              <router-view />
            </keep-alive>
          </el-card>

          <div :is="openType" :visible.sync="isShowModel">
            <component
              :is="pageName"
              :record-set-data="deletedRecords"
              @handleRecallShiTiL="handleRecallShiTiL"
            />
          </div>
        </el-col>
      </el-row>
    </div>
  </el-card>
</template>

<script>
import Axios from 'axios'
import Vue from 'vue'
import { LiYuDataSource } from 'liyu-ui'
// import { search } from '@/api/data'

// VShitiledit
let shiTiLeiDataSource
export default {
  name: 'MecManage',
  data() {
    return {
      cardHeight: 84,
      tabsName: 'info',
      loading: true,
      screenHeight: document.body.clientHeight,
      filterText: '',
      activeIndex: -1,
      Grade: '3',
      recordId: '',
      isShowModel: false,
      openType: '',
      pageName: '',
      records: [],
      deletedRecords: [],
      deliverRecords: [],
      recordUrl: this.$route.params.url
    }
  },
  watch: {
    screenHeight(val) {
      // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
      if (!this.timer) {
        // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
        this.screenHeight = val
        this.timer = true
        const that = this
        // console.log(val)
        setTimeout(function() {
          // 打印screenWidth变化的值
          that.timer = false
        }, 400)
      }
    },
    activeIndex: function(newVla, oldVal) {
      // console.log(newVla)
    }
  },
  created() {
    this.initShiTiLeiData()
    this.ifTagsView(this.$store.state.settings.tagsView)
  },
  mounted() {
    const that = this
    window.onresize = () => {
      return (() => {
        window.screenHeight = document.body.clientHeight
        that.screenHeight = window.screenHeight
      })()
    }
  },
  methods: {
    ifTagsView(data) {
      if (data) {
        this.cardHeight = 84
      } else {
        this.cardHeight = 50
      }
    },
    initShiTiLeiData() {
      const that = this
      shiTiLeiDataSource = new LiYuDataSource({
        shiTiLeiDH: 'DEV_ShiTiLei'
      })
      shiTiLeiDataSource.load({
        start: 1,
        limit: 10
      }, recordSet => {
        that.records = recordSet.getRecords()
        that.deletedRecords = recordSet.getDeletedRecords()
      })
    },
    handleSelectRecord(row) {
      const _id = row.getRecordId()
      if (this.$route.query._id !== _id) {
        this.$router.push({ path: '/shiTiLei/manage/shiTiLei/Show', query: { _id: _id }})
      }
    },
    editLIst(data) {
      this.list = data
    },
    openAdd() {
      const options = {
        openType: 'el-dialog', // el-drawer || el-dialog
        filePath: 'shiTiLei/append/addShiTiL/index.vue',
        fileName: 'appendRecord'
      }
      this.isShowModel = true
      this.openType = options.openType
      this.pageName = options.fileName
      Vue.component(options.fileName, resolve => {
        require([`@/views/app-dev/${options.filePath}`], resolve)
      })
    },
    getShiTiLei() {
      Axios.get('/api/getShiTiLeiList').then(res => {
        this.list = res.data
        console.log(res)
        // this.getActiveIndex()
      })
    },
    delShiTiL(recordInd, record) {
      // console.log('删除当前记录')
      this.records.splice(recordInd, 1)
    },
    recallShiTiL() {
      // console.log('展示删除的记录')
      const options = {
        openType: 'el-dialog', // el-drawer || el-dialog
        filePath: 'shiTiLei/recall/shiTiLRecall/index.vue',
        fileName: 'recallRecord'
      }
      this.isShowModel = true
      this.openType = options.openType
      this.pageName = options.fileName
      Vue.component(options.fileName, resolve => {
        require([`@/views/app-dev/${options.filePath}`], resolve)
      })
      this.deliverRecords = this.deletedRecords
    },

    handleRecallShiTiL(data) {
      this.records.push(data)
      this.isShowModel = false
    },

    submitRecord() {
      shiTiLeiDataSource.submit()
    },
    getShiTiLeiList() {
      Axios.get('/api/getShiTiLeiList').then(res => {
        this.list = res.data
        this.getActiveIndex()
      })
    },
    getActiveIndex() {
      if (this.list.length > 1) {
        this.activeIndex = this.list[0].id
        this.$refs.singleTable.setCurrentRow(this.list[0])
      } else {
        this.activeIndex = -1
      }
    },
    setIndex(item) {
      this.activeIndex = item.id
      this.currentRow = item
    },
    TextMsg() {
      this.$message('操作取消')
    },
    SuccMsg() {
      this.$message({
        message: '操作成功',
        type: 'success'
      })
    },
    WarMsg() {
      this.$message({
        message: '警告哦，这是一条警告消息',
        type: 'warning'
      })
    },
    ErrMsg() {
      this.$message.error('错了哦，这是一条错误消息')
    }
  }
}
</script>

<style scoped>
  .aside {
    /* height: 600px; */
    padding: 10px 15px;
    border: 1px solid #ebeef5;
  }

  ul.list {
    margin: 15px 0px 0px 0px;
    padding: 0px;
    list-style: none;
    width: 100%;
    overflow: auto;
  }

  ul.list > li {
    padding-left: 10px;
    cursor: pointer;
    height: 30px;
    line-height: 30px;
    text-align: left;
    /* background: rgb(236, 236, 236); */
  }

  ul.list > li:hover {
    color: rgb(87, 87, 87);
    background: rgb(221, 221, 221);
  }

  ul.list > li.active {
    color: rgb(87, 87, 87);
    background: rgb(221, 221, 221);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .options-btn {
    display: flex;
    justify-content: flex-end;
  }

  .clear {
    cursor: pointer;
  }

  .Null {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .content >>> .el-tabs__header {
    margin-bottom: 0px;
  }

  .body_content >>> .el-dialog__body {
    padding: 0px;
  }

  .body_content >>> .el-dialog__header {
    padding: 0px;
  }
</style>
